<template>
	<view>
		<custom-navigation-bar title="申请退款"></custom-navigation-bar>
		
		<view class="pl_item">
			<view class="pl_nr">
				退款原因
			</view>
			<view class="pl_ll">
				<textarea class="pl_dd" placeholder="请输入退款原因"></textarea>
			</view>
			 
			<view class="btn">
				提交
			</view>
			
		</view> 
	 
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue';
	import { ref } from "vue";
	const star=ref({
		rateScoreText: '',
		rateScoreDesc: ['非常不满意', '不满意', '一般', '比较满意', '非常满意'],
		stara:'/static/ic_xing@3x(1).png',//亮星星
		list:[0,1,2,3,4],
		starb:'/static/ic_xing3@3x.png',//暗星星
		xing:0
	});
	function clickStars(i){
		star.value.rateScoreText=star.value.rateScoreDesc[i]
		star.value.xing = i+1
		console.log("点击了"+(i+1)+"颗星")
	}
</script>

<style>
 
	.btn{
		width: 60%;height: 60rpx;line-height: 60rpx;background: #2AE8DC;float: left;border-radius: 20rpx;text-align: center;margin-left: 20%;color: white;margin-bottom: 50rpx;margin-top: 50rpx;
	}
	.star_box{
		width: 100%;height: 60rpx;float: left;margin-top: 30rpx;
	}
	.star_img{
		width: 40rpx;height: 40rpx;float: left;margin-left: 10rpx;
	}
	.pl_text{
		width: 80%;float: left;font-size: 25rpx;height: 30rpx;color: #666666;margin-left:10rpx;margin-top: -10rpx;
	}
	.pl_dd{
		width: 90%;float: left;height: 200rpx;border: #cccccc 3rpx solid;border-radius: 20rpx;margin-top: 20rpx;padding: 10rpx;
	}
	.pl_ll{
		width: 80%;float: left;height: auto;
	}
	.pl_item{
		width: 94%;height:auto;float: left;margin-left: 3%;background: white;border-radius: 25rpx;margin-top: 170rpx;font-size: 25rpx;
	}
	.pl_nr{
		width: 20%;float: left;height: 60rpx;line-height: 60rpx;margin-top: 20rpx;text-align: center;
	}
	 Page{
	 	background-color: #F2F2F2;
	 	font-size: 30rpx;
	 }
 
</style>